<template>
  <div class="main-box">
    <TreeFilter
      title="素材库"
      ref="MyTree"
      :request-api="dataCallback"
      @change="changeFilter"
      :default-value="initParams.id"
      :expand-all="true"
    >
      <template #header>
        <el-button type="primary" @click="opDir('add')" v-if="props.mode === 'opera'">新增根目录</el-button>
      </template>
      <template #default="{ row }">
        {{ row.data.name ? row.data.name : "我的资源" }}
      </template>
    </TreeFilter>
    <div class="table-box p-18px rounded-6px border border-solid border-custom-#e4e7ed bg-[var(--el-bg-color)]">
      <div class="flex-row flex py-10px">
        <el-button type="primary" @click="opDir('edit')" v-if="initParams.id !== '' && props.mode === 'opera'"
          >编辑目录</el-button
        >
        <el-button type="primary" @click="opDir('add')" v-if="initParams.id !== '' && props.mode === 'opera'">添加目录</el-button>
        <el-button type="danger" v-if="props.mode === 'opera'" :disabled="checkList.length === 0" @click="deleteFile"
          >批量删除</el-button
        >
        <file-input :pid="initParams.id === '' ? 0 : parseInt(initParams.id)" @success="successUpload"></file-input>
        <el-button class="ml-12px" type="success" @click="choose" v-if="checkList.length !== 0 && props.mode === 'select'"
          >确定</el-button
        >
      </div>
      <file-list :api="getFileList" :init-params="initParams" @select="chooseFileList" ref="fileRef" v-bind="attrs"></file-list>
    </div>
    <directory-dialog ref="dirRef"></directory-dialog>
  </div>
</template>

<script setup lang="ts">
import TreeFilter from "@/components/TreeFilter/index.vue";
import { reactive, ref } from "vue";
import directoryDialog from "./directoryDialog.vue";
import { createDir, getRoot, editDir, deleteFile as deleteApi } from "@/api/modules/file";
import { getFlatDirList } from "@/utils/index";
import fileInput from "./fileInput.vue";
import fileList from "./fileList.vue";
import { getFileList } from "@/api/modules/file";
import { useAttrs } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
const attrs = useAttrs();

const emits = defineEmits(["getUrl"]);

// ----传值
type fileType = {
  mode: "select" | "opera"; //select用于打开素材库，选择素材 oepra用于删除增加编辑素材库
  filter: "video" | "image" | "";
};

const props = withDefaults(defineProps<fileType>(), {
  mode: "opera",
  filter: ""
});

// -----传输完成后重新获取列表
const fileRef = ref<InstanceType<typeof fileList> | null>();

const successUpload = () => {
  fileRef.value?.refresh();
};

// ----当前被选择的目录
const initParams = reactive({ id: "", name: "", pageSize: 50, pageNum: 1, fileTypes: props.filter });

// 获取目录结构
const flatDirs = ref();

// 处理文件夹函数
const dataCallback = async () => {
  const res = await getRoot();
  flatDirs.value = getFlatDirList(res.data);
  return res;
};

// 当前选择的目录
const nowSelectDir = ref();

// ----树形框选择
const changeFilter = (val: string) => {
  initParams.id = val;
  const index = flatDirs.value.findIndex((e: any) => e.id == parseInt(initParams.id));
  nowSelectDir.value = flatDirs.value[index];
};

// ----更新
const MyTree = ref<InstanceType<typeof TreeFilter> | null>();

// ----目录弹框
const dirRef = ref<InstanceType<typeof directoryDialog> | null>();

// -----按钮配置
const opDir = (type: "add" | "edit") => {
  const params: any = {
    rowData: {
      name: type === "add" ? "" : nowSelectDir.value.name,
      pid: initParams.id ? parseInt(initParams.id) : ""
    },
    api: type === "add" ? createDir : editDir,
    refresh: MyTree.value?.refresh
  };
  dirRef.value?.acceptParams(params);
};

// -----素材库选择素材进行操作
const checkList = ref([]);

const chooseFileList = (val: any) => {
  checkList.value = val;
};

// -----删除
const deleteFile = async () => {
  const ids = checkList.value.map((e: any) => e.id);
  await useHandleData(deleteApi, { ids }, "删除所选文件");
  fileRef.value?.clear();
  fileRef.value?.refresh();
};

const choose = () => {
  if (props.mode === "select") {
    emits("getUrl", checkList.value[0]);
  }
};

const clear = () => {
  fileRef.value?.clear();
};

defineExpose({
  opDir,
  clear
});
</script>

<style></style>
